package main

func main() {
	/*
			##DOM：
				* 概念：Document Object Model 文档对象模型
					* 将 标记语言文档 的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行 CRUD(增删改查)的动态操作
				* DOM树：
											文档
											│
										根元素<html>
						╭───────────────────┼─────────────────────╮
					元素<head>								元素<body>
						│								╭─────────┴──────────╮
					元素<title>			属性:href ─── 元素<a>				元素<h1>
						│								│					 │
					文本:“文档标题”				文本:“我的链接”			文本:“我的标题”

				* W3C DOM 标准被分为 3 个不同的部分：
					* 核心 DOM - 针对任何结构化文档的标准模型
						* Document：文档对象
						* Element：元素对象
						* Attribute：属性对象
						* Comment：注释对象
						* Node：节点对象，其他 5 个的父对象
					* XML DOM - 针对 XML 文档的标准模型
					* HTML DOM - 针对 HTML 文档的标准模型

				* 核心 DOM 模型：
					* Document：文档对象
						1.创建（获取）：在 html dom 模型中，可以使用 window对象 来获取
							1.window.document
							2.document
						2.方法：
							1.获取 Element 对象：
								1. getElementById()：根据 id 属性值获取 元素对象。id属性值 一般 唯一
								2. getElementsByTagName()：根据 元素名称 获取元素对象们。返回值是一个数组
								3. getElementsByClassName()：根据 class 属性值获取元素对象们。返回值是一个数组
								4. getElementsByName()：根据 name 属性值获取元素对象们。返回值是一个数组
							2.创建其他 DOM 对象：
							    1. createAttribute(name)：创建拥有指定名称的属性节点，并返回新的 Attr 对象
							    2. createComment()：创建注释节点
							    3. createElement()：创建元素节点
							    4. createTextNode()：创建文本节点
						3.属性：
					* Element：元素对象
						1. 获取/创建：通过 document 来获取和创建
						2. 方法：
							1. removeAttribute()：删除属性
							2. setAttribute()：设置属性
					* Node：节点对象，其他 5 个的父对象
						* 特点：所有 DOM 对象都可以被认为是一个节点
						* 方法：
							* CRUD DOM 树：
								* appendChild()：向节点的子节点列表的结尾添加新的子节点。
								* removeChild()：删除（并返回）当前节点的指定子节点。
								* replaceChild()：用新节点替换一个子节点。
						* 属性：
							* parentNode：返回当前节点的父节点。

				* HTML DOM
					1.标签体的设置和获取：innerHTML
					2.使用 html 元素对象的属性
					3.控制元素样式
						1.使用元素的 style 属性来设置
							如：
								//修改样式方式1
								div1.style.border = "1px solid red";
								div1.style.width = "200px";
								//font-size --> fontSize
								div1.style.fontSize = "20px";
						2.提前定义好 类选择器 的样式，通过元素的 className 属性来设置其 class 属性值。
							如：
								<style>
								  .d1{
									border: 1px solid red;
									width: 100px;
									height: 100px;
								  }
		    					</style>
								div2.onclick = function (){
									div2.className = "d1";
								}
	*/
}
